{% extends "base.html" %}

{% block head %}
{{block.super}}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
{% endblock %}

{% block content %}

<div class="container">
  <h1>Plot using Plot.ly and some clever JavaScript</h1>
  <p class="lead">Select some points (Box or Lasso tool) from the plot and see them printed.</p>
</div>

<div class="container">
  <div class="row" style="border: 1px solid black">
    <div id="plot_container" class="col-md-12">{{plot|safe}}</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <br/>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <pre>
        var myDiv = $('.plotly-graph-div')[0];
        myDiv.on('plotly_selected', function(eventData) {
          console.log(eventData.points);
          for (var idx = 0; idx < eventData.points.length; idx++) {
            console.log(eventData.points[idx]);
          };
        });
      </pre>
    </div>
  </div>
</div>

<div class="container">
  <p>Selected points:</p>
  <pre id="selected_points">

  </pre>
</div>

<div class="container">
  <p>
    &nbsp;
  </p>
  <a class="btn btn-primary pull-right" href="{% url 'index' %}"> Go back to index...</a>
</div>
<!-- /.container -->
{% endblock %}

{% block tail %}
{{block.super}}
<script>
    var myDiv = $('.plotly-graph-div')[0];
    myDiv.on('plotly_selected', function(eventData) {
      console.log(eventData.points);
      $("#selected_points").empty();
      for (var idx = 0; idx < eventData.points.length; idx++) {
        // console.log(eventData.points[idx]);
        $("#selected_points").append(
          "<strong>" + eventData.points[idx].data.name + "</strong>=(" + eventData.points[idx].x + "," + eventData.points[idx].y + ") "
        );
      };
    });
</script>
{% endblock %}
